<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p2_CSS选择器</title>
        <style>
            /* 标签名选择器 */
            h4 {
                color:red;
            }
            div {
                width:100px;
                height:100px;
                background-color: yellow;
            }
            /* id选择器( # ) */
            #d2 {
                border:2px solid red;
            }
            /* 类选择器( . )*/
            .error {
                background-color: red;
            }
            .success {

                background-color: green;
            }
            .msg {
                color:white;
            }
            /* 群组选择器( , ) 多个标签用,号隔开，多个标签是"或"关系，只要满足其中一个选择器条件即可被选中  */
            #d2,h4,.error {
                text-decoration:underline;
            }
            /* 通用选择器( * ) 选中所有元素 */
            * {
                font-style: italic;
            }
            /* 属性选择器( [type=" "] ) */
            [type="text"] {
                background-color: deepskyblue;
            }

            /* 并列选择器( input[type="text"]  ) 两个选择器紧挨在一起写，是”与“的关系，必须同时满足所有选择器的条件才能生效 */
            /* 并列选择器   标签名属性  */

            /* 伪类选择器( :link )( :visited )( :hover )( :active ) CSS规范要求必须按照如下顺序编写 否则其中个别会不生效 */
     /* 标签名伪类 */
            a:link { /* 选中超链接未被访问过的状态 */
                color:gray;
            }
            a:visited { /* 选中超链接已被访问过的状态 */
                color:red;
            }
            a:hover { /* 选中超链接悬停的状态 */
                color:orange;
            }
            a:active { /* 选中超链接激活的状态 */
                color:green;
            }
            /* 后代选择器( 空格 ) 选中所有包含在的下层元素:儿、孙、重孙、玄孙... */
            #d1 span {
                color:cyan;
            }
            /* 直接子代选择器( > ) 选中的是最后大于号指向的元素，即使该元素内部还有与该元素类型相同的元素也不会继续向下选择 */
            #d1>div>span>span {
                color:red;
            }
            #d3:hover { /* 伪类选择器中只有 ( :hover悬停 ) 能给超链接之外的元素使用，其它三个只能超链接使用 */
                background-color: purple;
            }
        </style>

    </head>
    <body>
        <div id="d1">
            <span>span1行级分区</span>
            <div>
                <span>span2行级分区</span>
                <p>我是段落</p>
                <p>我是<span>测试</span>段落</p>
                <span>
                    3
                    <span>
                        4
                        <span>5</span>
                    </span>
                </span>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <hr>
        <br>
        <br>
        <a href="https://www.baidu.com">超链接1</a>
        <a href="nashan">超链接2</a>
        <hr>
        <h4>我是h4标题</h4>
        <p>我是p段落</p>
        <a href="#">我是a超链接</a>
        <h4 id="d2">我是h4标题2</h4>
        <div>我是div1</div>
        <div>我是div2</div>
        <div id="d3">我是div3</div>
        <hr>
        <span class="error msg">用户名已被占用</span>
        <span class="error msg">密码长度不正确</span>
        <span class="error msg">两次输入的密码不一致</span>
        <br>
        <span class="success msg">用户名可以使用</span>
        <span class="success msg">手机号已验证</span>
        <span class="success msg">邮箱格式正确</span>
        <hr>
        <input type="text">
        <input type="password">







    </body>
</html>